import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as echarts from 'echarts';
import { EchartsComponent } from 'app/modules/share/components/echarts/echarts.component';
import { LogService } from 'app/modules/log/services/log.service';
import { BehaviorSubject } from 'rxjs';
import { ListOption } from 'app/modules/base/api-base';
import { scan, switchMap } from 'rxjs/operators';
import * as dayjs from 'dayjs';
import { ActivatedRoute } from '@angular/router';
import { ExceptionCount } from '../../services/dashboard.service';
import errorCodeMsg from '../../services/errorCodeMsg';

@Component({
  selector: 'm-exception',
  templateUrl: './exception.component.html',
  styleUrls: ['./exception.component.scss'],
})
export class ExceptionComponent implements OnInit {
  @ViewChild(EchartsComponent) charts: EchartsComponent;
  constructor(private route: ActivatedRoute, private logger: LogService) {}
  exceptionAPI = this.logger.resource('pc_exception');
  query$ = new BehaviorSubject<ListOption>({ page: 1, count: 8 });
  result$ = this.query$.pipe(
    scan((opt, v) => ({ ...opt, ...v })),
    switchMap(opt => this.exceptionAPI.list(opt)),
  );
  exceptionCount: ExceptionCount[] = this.route.snapshot.data.data.exception;
  ngOnInit() {
    setTimeout(() => {
      this.charts.setOption(styleOption);
      const data = this.exceptionCount.map(e => ({ value: e.os + e.software, date: e.date }));
      this.charts.setOption({ series: [{ data }] });
    }, 100);
  }
  codeFilter(code){
    const data=errorCodeMsg.filter(item=>{
      return item.errorCode==code
    })
    return data[0].errorMsg
  }
}

const styleOption: echarts.EChartOption = {
  xAxis: {
    data: [],
    show: false,
  },
  yAxis: {
    show: false,
  },
  grid: {
    left: -15,
    right: -15,
    bottom: 0,
    top: 0,
  },
  tooltip: {
    formatter: format => {
      const data = (format as any).data;
      const date = dayjs(data.date).format('YYYY/MM/DD');
      return `${date}<br>终端异常数${data.value}`;
    },
    textStyle: {
      color: '#0DC8DE',
    },
  },
  series: [
    {
      name: '终端异常数',
      type: 'line',
      itemStyle: { color: '#0DC8DE' },
      lineStyle: { color: '#0DC8DE' },
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#0DC8DE',
          },
          {
            offset: 0.8,
            color: 'rgb(255,255,255)',
          },
        ]),
      },
    },
  ],
};
